<template>
  <view>

    <view class="pages_wrap">

      <view class="box_on_wrap">
        <view class="box_on_head" style="align-items: center;display: flex;padding-bottom:20rpx">
          <image style="width: 48rpx;height: 48rpx;border-radius: 50%;margin-right: 20rpx;" :src="imgurlBwc+'/note/dzdp@2x.png'"></image>
          <text class="box_on_title_text" style="font-size: 32rpx">大众点评</text>
        </view>
        <view class="box_on_title">
          <view style="align-items: center">
            <text class="one">1</text>
            <text style="margin-left: 10rpx;float: left">上传大众点评笔记截图</text>
            <view class="box_on_why" @click="lookshili(3)">
              <u-icon name="question-circle" color="#2979ff" size="35" style=""></u-icon>
              <!--截图教程提示-->
              <view class="jiaocheng_box">
                <text class="triangle"></text>
                <text class="jiaocheng_box_text">如何获取笔记截图？</text>
              </view>
            </view>

          </view>
          <view @click="screenShot()" style="width: 120rpx;height: 48rpx;padding: 6rpx 20rpx;color: #FFFFFF;background: #FF7800;border-radius: 30rpx;float: right">去截图</view>
        </view>

        <view class="tishi_box">
          <text>请按照笔记要求正确上传</text>
        </view>
        <view class="upload_box">
          <u-upload ref="uploadnoe" :deletable="true" :action="action" :header="headers" :form-data="formData"
                    name="file" :file-list="fileList1" max-count="1" :before-upload="beforeUpload"
                    @on-remove="onRemove1" @on-change="onCchange1"></u-upload>
        </view>
        <view class="box_on_title" style="margin-top: 30rpx">
          <view style="display: flex;align-items: center">
            <text class="one">2</text>
            <text style="margin-left: 10rpx">笔记链接</text>
            <!--<view class="box_on_why" @click="lookshili(type)">
              <u-icon name="question-circle" color="#2979ff" size="35" style=""></u-icon>
              &lt;!&ndash;截图教程提示&ndash;&gt;
              <view class="jiaocheng_box">
                <text class="triangle"></text>
                <text class="jiaocheng_box_text">如何获取笔记截图？</text>
              </view>
            </view>-->
          </view>
        </view>
        <view class="box_on_text" style="display: flex;align-items: center">
          <text style="font-size: 28rpx;padding-right: 20rpx">笔记链接</text>
          <u-input v-model="noteVal" type="text" :border="false" placeholder="请输入或粘贴笔记链接"  style="width:calc(100% - 140rpx)"/>
        </view>
        <u-line color="#EBEBEB"></u-line>
        <view class="box_on_tips" style="margin-top: 24rpx;color: #FF7A00;font-size: 24rpx">温馨提示：请到您发布笔记的平台，复制笔记链接，输入或粘贴到上面输入框内</view>
      </view>

      <view class="box_on_wrap">
        <view class="box_on_head" style="align-items: center;display: flex;padding-bottom:20rpx">
          <image style="width: 48rpx;height: 48rpx;border-radius: 50%;margin-right: 20rpx;" :src="imgurlBwc+'/note/xhs@2x.png'"></image>
          <text class="box_on_title_text" style="font-size: 32rpx">小红书</text>
        </view>
        <view class="box_on_title">
          <view style="align-items: center">
            <text class="one">1</text>
            <text style="margin-left: 10rpx;float: left">上传小红书笔记截图</text>
            <view class="box_on_why" @click="lookshili(1)">
              <u-icon name="question-circle" color="#2979ff" size="35" style=""></u-icon>
              <!--截图教程提示-->
              <view class="jiaocheng_box">
                <text class="triangle"></text>
                <text class="jiaocheng_box_text">如何获取笔记截图？</text>
              </view>
            </view>

          </view>
          <!--<view @click="screenShot()" style="width: 120rpx;height: 48rpx;padding: 6rpx 20rpx;color: #FFFFFF;background: #FF7800;border-radius: 30rpx;float: right">去截图</view>-->
        </view>

        <view class="tishi_box">
          <text>请按照笔记要求正确上传</text>
        </view>
        <view class="upload_box">
          <u-upload ref="uploadnoe" :deletable="true" :action="action" :header="headers" :form-data="formData"
                    name="file" :file-list="fileList1" max-count="1" :before-upload="beforeUpload"
                    @on-remove="onRemove1" @on-change="onCchange1"></u-upload>
        </view>
        <view class="box_on_title" style="margin-top: 30rpx">
          <view style="display: flex;align-items: center">
            <text class="one">2</text>
            <text style="margin-left: 10rpx">笔记链接</text>
            <!--<view class="box_on_why" @click="lookshili(type)">
              <u-icon name="question-circle" color="#2979ff" size="35" style=""></u-icon>
              &lt;!&ndash;截图教程提示&ndash;&gt;
              <view class="jiaocheng_box">
                <text class="triangle"></text>
                <text class="jiaocheng_box_text">如何获取笔记截图？</text>
              </view>
            </view>-->
          </view>
        </view>
        <view class="box_on_text" style="display: flex;align-items: center">
          <text style="font-size: 28rpx;padding-right: 20rpx">笔记链接</text>
          <u-input v-model="noteVal2" type="text" :border="false" placeholder="请输入或粘贴笔记链接" style="width:calc(100% - 140rpx)"/>
        </view>
        <u-line color="#EBEBEB"></u-line>
        <view class="box_on_tips" style="margin-top: 24rpx;color: #FF7A00;font-size: 24rpx">温馨提示：请到您发布笔记的平台，复制笔记链接，输入或粘贴到上面输入框内</view>
      </view>


    </view>
    <view :style="{height: btnHeight + 'px'}"></view>
    <view class="bottom-btn-wrap" @click="Tijiao()" style="padding-bottom: 0">
      <view class="bottom-fixed-btn">
        <view class="btn pay">提交认证</view>
      </view>
    </view>

    <u-popup v-model="steuptfour_Popup" mode="center" width="584" height="80%" border-radius="20" :closeable="true"
             :mask-close-able="false">
      <view class="tc_wrap">
        <view class="tc_info">
          <image class="gif_tu" :src="chakanshilie" mode="widthFix"></image>
        </view>
        <view class="tc_btn_box">
          <view class="lijipay">
            <u-button hover-class="none" type="info" shape="circle" :ripple="true" @click="steuptfour_Popup = false">
              我知道了
            </u-button>
          </view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import {baseUrl} from "@/api/request";

const app = getApp();
import store from '@/public/store.js'
// import value from "@/uview-ui/components/u-text/value";
// import value from "@/uview-ui/components/u-text/value";

export default {
  computed: {
    value() {
      return value
    }
  },
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,
      Urllink: '',
      fans: '',
      likes: '',
      account: '',
      show: false,
      level: 'LV1',
      level_value: 'LV1',
      actionSheetList: [
        {
          text: 'LV1', value: '1'
        },
        {
          text: 'LV2', value: '2'
        },
        {
          text: 'LV3', value: '3'
        },
        {
          text: 'LV4', value: '4'
        },
        {
          text: 'LV5', value: '5'
        },
        {
          text: 'LV6', value: '6'
        },
        {
          text: 'LV7', value: '7'
        },
        {
          text: 'LV8', value: '8'
        }
      ],

      action: baseUrl + '/api/userCertified/uploadAccountScreenshot',
      headers: {
        'authorization': uni.getStorageSync('token'),
        'platform': 0,
      },
      formData: {},
      fileList1: [],
      images1: '', //已上传截图
      platformData: {},
      steuptfour_Popup: false,
      chakanshilie: '',
      LaiYuan: 0,
      type: 0,
      platform: "",
      opsData: {},
      noteVal: '', //笔记链接value
      noteVal2: '', //笔记链接value2
      btnHeight: '',//底部按钮高度
    }
  },
  onLoad(ops) {
    ops = JSON.parse(decodeURIComponent(ops.data));
    this.opsData = ops
    uni.setNavigationBarTitle({
      title: ops.title + '上传笔记'
    });
    this.platform = ops.title
    //console.log('平台数据', ops)
    if (ops.type) {
      this.type = parseInt(ops.type)
      this.headers.type = this.type
    }
    if (ops.isAdd) {
      return
    }

    this.platformData = ops
    console.log('平台数据', ops)

    let laiyuan = ops.LaiYuan
    if (laiyuan && laiyuan == 1) {
      this.LaiYuan = laiyuan
    }
  //  获取底部按钮高度
    uni.createSelectorQuery().select('.bottom-btn-wrap').boundingClientRect(rect => {
      this.btnHeight = rect.height
      console.log('高度===', rect.height)
    }).exec();
  },
  methods: {
    actionSheetCallback(index) {
      this.level = this.actionSheetList[index].text;
      this.level_value =  this.actionSheetList[index].value;
    },
    // 跳转到截图步骤页面
    lookshili(type) {
      console.log("type", type)
      //this.steuptfour_Popup = true
      if (type == 1) {
        this.chakanshilie = this.platformData.screenshot_example

        uni.navigateTo({
          url: '/subpackageB/pages/RuheJieTu/RuheJieTu?tupian=' + this.imgurlBwc + "/teache/xhs.png" + '&type=' + type
        })

      } else if (type == 3) {
        this.chakanshilie = this.platformData.url_example

        uni.navigateTo({
          url: '/subpackageB/pages/RuheJieTu/RuheJieTu?tupian=' + this.imgurlBwc + "/teache/dzdp.png" + '&type=' + type
        })
      }
    },
    // 跳转到截图
    screenShot(){
      uni.navigateToMiniProgram({
        appId: 'wx734c1ad7b3562129',
        path: 'pages/my/my.html',
        extraData: {

        },
        success(res) {
          // 打开成功
          console.log('跳转成功');
        },
        fail(res) {
          // 打开失败
          console.log('跳转失败');
        }
      })
    },
    beforeUpload(index, list) {
      console.log('上传前回调', index, list);
      uni.showLoading({
        title: '上传中...'
      });
    },
    //订单号和下单时间上传回调
    onCchange1(e) {
      console.log('上传完成回调', e);
      let that = this
      uni.hideLoading();
      let resuleok = JSON.parse(e.data)
      console.log('上传截图', resuleok)
      that.images1 = resuleok.result.show_path

      that.account = resuleok.result.account
      that.fans = resuleok.result.handle_data.fansCount
      that.likes = resuleok.result.handle_data.likesCount
      if(that.type == 1){
        that.account = resuleok.result.handle_data.accountNumber
      } else if (that.type == 3){
        that.actionSheetCallback(resuleok.result.handle_data.lvLevel - 1)
      }

    },
    onRemove1(e) {
      this.images1 = ''
    },
    Tijiao() {
      let that = this
      if (that.images1 == '') {
        uni.showToast({
          title: '请上传截图',
          icon: 'none',
          duration: 3000
        })
      } else if (that.platformData.value == 1 && that.Urllink == '') {
        uni.showToast({
          title: '请输入链接',
          icon: 'none',
          duration: 3000
        })
      } else if (that.fans == '' && that.fans !== 0) {
        uni.showToast({
          title: '请输入粉丝数量',
          icon: 'none',
          duration: 3000
        })
      } else if (that.likes == '' && that.likes !== 0) {
        uni.showToast({
          title: '请输入获赞数量',
          icon: 'none',
          duration: 3000
        })
      }
      else if (that.account == '') {
        uni.showToast({
          title: '请输入平台账号',
          icon: 'none',
          duration: 3000
        })
      }
      else {
        that.$api.userCertifiedsubmit({
          platform_type: that.type !== 0 ? that.type : this.platformData.value, //平台类型：1小红书 2抖音 3大众点评 4美团
          fans: that.fans, //粉丝数量
          likes: that.likes, //获赞数
          account: that.account, //认证账号
          image: that.images1,
          level: that.level_value,
        }).then(res => {
          console.log('提交', res.data.result);
          uni.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 4000
          });

          if (this.LaiYuan == 1) {
            uni.navigateBack({
              delta: 2
            })
          } else {
            uni.navigateBack()
          }

        }).catch(err => {
          console.log('提交报错');
          /*uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 4000
          });*/
        })
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #F4F4F4;
}

.one {
  width: 22rpx;
  font-weight: bold;
  font-size: 36rpx;
  color: #FF7A01;
  display: block;
  float: left;
}

.one::after {
  content: "";
  display: block;
  background: linear-gradient(90deg, #FFEE9B 60%, rgba(216, 216, 216, 0) 100%);
  width: 38rpx;
  height: 13rpx;
  border-radius: 30rpx;
  margin-top: -15rpx;
  margin-left: -10rpx;
}

.pages_wrap {
  padding: 30rpx 30rpx 0;
}

.box_on_wrap {
  padding: 30rpx;
  border-radius: 24rpx;
  background-color: #FFFFFF;
  margin-bottom: 30rpx;
  .box_on_title {
    height: 60rpx;
    //display: flex;
    align-items: center;
    //justify-content: space-between;

    view:nth-child(1) {
      color: $zzy-text-color-333333;
      font-size: 28rpx;
      font-weight: bold;
    }

    view:nth-child(2) {
      color: #FF4E0D;
      font-size: 24rpx;
    }
  }
  .box_on_why {
    width: 40rpx;height: 40rpx;
    margin-left: 10rpx;
    float: left;
    position: relative;
    //截图教程提示css
    .jiaocheng_box {
      text-align: center;
      width: 40rpx;
      height: 80rpx;
      .triangle {
        width: 0;
        height: 0;
        position: absolute;top: 20rpx;left: 0;right: 0;
        margin: 0 auto;
        border-left: 12px solid transparent; /* 左边的边框是透明的 */
        border-right: 12px solid transparent; /* 右边的边框是透明的 */
        border-top: 0px solid transparent; /* 底边是透明的 */
        border-bottom: 10px solid rgba(105,105,105,0.5);; /* 上边是黑色的，形成三角形 */
      }
      .jiaocheng_box_text {
        position: absolute;top: 41rpx;left: calc(100% - 120rpx);
        width: 240rpx;
        height: 50rpx;
        padding: 10rpx;
        background: rgba(105,105,105,0.5);
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }


  .tishi_box {
    text-align: left;
    border-radius: 16rpx;
    padding: 10rpx 20rpx;
    background-color: #f8f1e1;
    color: #fd8211;
    font-size: 24rpx;
    line-height: 38rpx;
  }

  .upload_box {
    margin-top: 20rpx;
    position: relative;
    left: -10rpx;
  }

  .input_box {
    margin-top: 20rpx;
    border-radius: 16rpx;
    border: 1px solid #f6f6f6;
    padding: 4rpx 24rpx;
    background-color: #FDFDFD;
  }
}

.tc_wrap {
  //padding: 30rpx;
  text-align: center;

  .guanyu_title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .wenan {
    color: #999;
    margin-bottom: 20rpx;
  }

  .tc_images {
    image {
      width: 300rpx;
      height: 300rpx;
    }
  }

  .steup_info {
    text-align: left;
    margin-top: 30rpx;

    .yqoiu {
      view:nth-child(1) {
        color: #666;
      }
    }

    .yqoiu2 {
      color: #666;

      span {
        color: #FE7B20;
      }
    }
  }

  .tc_info {
    view:nth-child(1) {
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }

    view:nth-child(2) {
      font-size: 28rpx;
      color: #999;

      span {
        color: #FF611E;
      }
    }

    .gif_tu {
      width: 100%;
      //height: 524rpx;
      border-radius: 20rpx;
    }
  }

  .tc_btn_box {
    display: flex;
    align-items: center;
    //margin-top: 36rpx;
    justify-content: center;
    padding: 0 30rpx;

    .tc_btn_huise {
      flex: 1;
      margin-right: 12rpx;
      background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
      color: #333333;
    }

    .tc_btn_huise_err {
      flex: 1;
      background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
      color: #fff;
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
    }

    .lijipay1 {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 20rpx 0 0;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
        color: #333;
      }
    }

    .lijipay {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 30rpx auto;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
        color: #fff;
      }
    }
  }
}
</style>